<template>
	<view class="charts-box">
		<qiun-data-charts
			:type="current == 0?'line':'column'"
			:chartData="data"
			:opts="current == 0?lopts:copts"
			background="none"
		/>
	<!-- 	<qiun-data-charts
			v-else
		  type="column"
		  :chartData="productData"
			:opts="copts"
		  background="none"
		/> -->
	</view>
</template>

<script>
	export default {
		props: {
			current: {
				type: Number,
				default: 0
			},
			data: {
				type: Object,
				default: {}
			},
			// productData: {
			// 	type: Object,
			// 	default: {}
			// }
		},
		data() {
			return {
				lopts: {
					color: [this.themeColor],
					dataLabel: false,
					fontColor: '#999999',
					fontSize: 11,
					dataPointShape: false,
					legend: {
						float: 'center',
					},
					xAxis: {
						disableGrid: false,
						gridColor: '#EEEEEE'
					},
					yAxis: {
						gridColor: '#EEEEEE'
					},
					extra: {
						line: {
							width: 6,
						},
					}
				},
				copts: {
					color: ['#666666', '#FFBB1A', '#FF551A'],
					dataLabel: false,
					fontColor: '#999999',
					fontSize: 11,
					yAxis: {
						disableGrid: false,
						gridColor: '#eeeeee',
					},
					legend: {
						float: 'center'
					},
					extra: {
						column: {
							width: 5,
							barBorderCircle: true,
							seriesGap: 6,
							categoryGap: 8,
							linearType: "custom",
							customColor: ['#666666', '#FFBB1A', '#FF551A']
						},
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.charts-box{
		min-height: 300rpx;
	}
</style>
